<template>
  <!-- :style="{ paddingBottom: tempheight }" -->
  <view class="send">
    <view class="sendINput" v-if="!share">
      <!-- @confirm="onSendMessage"
        confirmType="发送"
         -->
      <!-- <input
        @focus="onSendMessage"
        @input="onInput"
        maxlength="-1"
        @confirm="onSendMessage"
        @blur="blur"
        :cursor-spacing="8"
        :adjust-position="false"
        type="text"
        v-model="text"
        class="input"
        placeholder="请输入内容"
      />
      <view class="sendbtn" @click="onSendMessage">
        <view v-if="!sendLoadng">
          <image class="btn-icon" src="@/static/images/send.png" mode="widthFix" />
          发送
        </view>

        <u-loading-icon v-else mode="circle"></u-loading-icon>
      </view> -->
      <!-- :adjust-position="false" -->
      <u-input
        @input="onInput"
        @confirm="onSendMessage"
        @focus="focus"
        v-model="text"
        border="none"
        placeholder="对话从此刻开始"
        maxlength="-1"
        @blur="blur"
        autoHeight
        @keyboardheightchange="keyboardheightchange"
      >
        <template slot="suffix">
          <view class="sendbtn" @click="onSendMessage">
            <view v-if="!sendLoadng">
              <image class="btn-icon" src="@/static/images/send.png" mode="widthFix" />
              发送
            </view>

            <u-loading-icon v-else mode="circle"></u-loading-icon>
          </view>
        </template>
      </u-input>
    </view>
    <view v-else class="sendelse">
      <view @click="cancel">取消</view>
      <view>
        <!-- <u-button
          @click="jumpToWeb"
          style="
            font-size: 32rpx;
            border-radius: 12rpx;
            box-shadow: 0px 1px 8px rgba(10, 63, 255, 0.35);
          "
          type="primary"
          color="rgba(10, 63, 255, 1)"
          icon="share-square"
          text="转发"
        ></u-button> -->

        <button open-type="share" class="shareBtn" @click="jumpToWeb">转发</button>
        <!-- <button v-show="!showBtn" class="shareBtn" @click="jumpToWeb">下一步</button> -->
      </view>
    </view>
    <!-- <view class="btn" @click="onSendMessage">
      <view class="" v-if="!sendLoadng">
        <image class="btn-icon" src="@/static/images/send.png" mode="widthFix" /> 发送
      </view>
      <u-loading-icon v-else mode="circle"></u-loading-icon>
    </view> -->
  </view>
</template>

<script>
export default {
  onShareAppMessage(res) {
    console.log('分享触发------------', res)
    if (res.from === 'button') {
      console.log(res.target)
    }
    return {
      title: '道测AI助手',
      path: '/pages/new-chat/new-chat',
      mpId: 'wx5c33039f441b37cf', //此处配置微信小程序的AppId
    }
  },
  data() {
    return {
      text: '',
      id: '',
      bottom: 0,
      tempheight: '0px',
      timer: 0,
      showBtn: false,
    }
  },
  computed: {
    sendLoadng() {
      return this.$store.state.chat.sendLoading
    },
    share() {
      return this.$store.state.chatAI.share
    },
    keyboardHeight() {
      return this.$store.state.chatAI.keyboardHeight
    },
  },
  created() {
    try {
      wx.onKeyboardHeightChange((obj) => {
        console.log('进来监听', obj)
        // 获取系统信息
        let _sysInfo = uni.getSystemInfoSync()
        let _heightDiff = _sysInfo.screenHeight - _sysInfo.windowHeight
        let _diff = obj.height - _heightDiff

        // 键盘高度
        this.tempheight = (_diff > 0 ? _diff : 0) - 12 + 'px'

        // }

        console.log('键盘高度', this.tempheight)
        if (parseInt(this.tempheight) > 26) {
          this.$store.commit('SETHEIGHT', this.tempheight)
        }
      })
    } catch (error) {}
  },
  methods: {
    blur() {
      this.$store.commit('SETFOUCE', false)
      this.tempheight = '25px'
    },
    focus() {
      this.$store.commit('SETFOUCE', true)
      // console.log('键盘高度--this.tempheight聚焦不能小于100', this.tempheight)
      // console.log('键盘高度--keyboardHeight', this.keyboardHeight)
      // // if (parseInt(this.keyboardHeight) > 1) {
      // if (parseInt(this.tempheight) > parseInt(this.keyboardHeight)) {
      //   this.$store.commit('SETHEIGHT', this.tempheight)
      //   this.$store.commit('SETFOUCE', true)
      // } else if (parseInt(this.keyboardHeight) > 1) {
      //   this.tempheight = this.keyboardHeight
      // }
    },
    async onSendMessage() {
      if (this.sendLoadng) return
      if (uni.$u.trim(this.text) === '') {
        return uni.showToast({
          title: '请输入',
          icon: 'none',
        })
      }
      if (this.timer < 10 && this.timer !== 0) {
        return uni.showToast({
          title: '聊天最小间隔为 10秒',
          icon: 'none',
          duration: 2000,
        })
      }
      // 手动限制十秒
      let tempnub = setInterval(() => {
        this.timer += 1
      }, 1000)
      if (this.timer > 10) {
        this.timer = 0
        clearInterval(tempnub)
      }
      this.$store.commit('SAVECHATLIST', {
        content: this.text,
        role: 'user',
      })

      this.$store.commit('setSendLoading', true)
      const message = {
        id: this.id || uni.$u.guid(),
        role: 'user',
        content: this.text,
        status: 'done',
        time: new Date().getTime(),
      }
      // 这里发请求 已经开始聊天了
      await this.$store.dispatch('IchatMessageAsk', {
        conversation_id: this.$store.state.chatAI.newChatId,
        ask_content: this.text,
        tepId: uni.$u.guid(),
      })
      this.text = ''
      this.id = ''
      this.$store.commit('setSendLoading', false)
    },
    async onInput(value) {
      if (this.id === '') this.id = uni.$u.guid()
      if (value !== '') {
        const message = {
          id: this.id,
          role: 'user',
          content: value,
          status: 'sending',
          time: new Date().getTime(),
        }

        // this.$store.commit('sendMessage', message)
      } else {
        this.$store.commit('deleteMessage', this.id)
        this.id = ''
      }
    },
    cancel() {
      this.$store.commit('SETSHARE', false)
      this.$store.commit('SHARECLEAR')
    },
    async jumpToWeb() {
      uni.showLoading({
        title: '转发中...',
      })
      await this.$store.dispatch('IchatShareNew')
      this.showBtn = true
      uni.hideLoading()
    },
    keyboardheightchange(e) {
      console.log('input的e', e)
    },
    hideBtn() {
      setTimeout(() => {
        this.showBtn = false
      }, 2000)
    },
  },
}
</script>
<style scoped lang="scss">
.input {
  height: 68upx;
  line-height: 68upx;
  padding: 0 20upx;
  font-size: 28upx;
  border-radius: 10upx;
  background-color: #fff;
  width: calc(100% - 120upx - 20upx - 40upx - 60upx);
  // border: #f00 1px solid;
}
.send {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 16rpx 24rpx 40rpx 24rpx;
  box-sizing: border-box;
  height: 168rpx;
  background-color: #f5f5f5;
  // background-color: red;
  min-height: 100rpx;
  width: 100%;
  display: flex;
  align-items: center;

  .sendINput {
    height: 80rpx;
    width: 100%;
    background-color: #fff;
    border-radius: 20rpx;
    box-sizing: border-box;
    padding-left: 24rpx;
  }
  .sendelse {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-evenly;
    font-size: 24rpx;

    & view:nth-child(2) {
      width: 366rpx;
    }
  }
  .sendbtn {
    margin-top: 6rpx;
    margin-right: 6rpx;
    border-radius: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24rpx;
    width: 136rpx;
    height: 68rpx;
    background: rgba(209, 218, 255, 1);
    color: rgba(10, 63, 255, 1);
  }

  .btn-icon {
    margin-top: 4rpx;
    width: 28rpx;
    margin-right: 6rpx;
  }
}
.shareBtn {
  font-size: 32rpx;
  border-radius: 12rpx;
  box-shadow: 0px 1px 8px rgba(10, 63, 255, 0.35);
  background-color: $main-color;
  color: #fff;
}
</style>
